<template>
  <div class="change-word">
    <div>
      <van-nav-bar
        title="Change password"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="bg-line"></div>
    <div class="form">
      <div class="form-item">
        <div class="form-left">
          <div class="icon">New password:</div>
        </div>
        <div class="form-right">
          <input
            type="password"
            placeholder="Please input"
            v-model="password"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="form-left">
          <div class="icon">Repeat password</div>
        </div>
        <div class="form-right">
          <input
            type="password"
            placeholder="Please input"
            v-model="repeatPassword"
          />
        </div>
      </div>
      <div class="user-name">
        <div class="icon">Phone number:</div>
        <div class="text">
          <input type="number" v-model="phone" placeholder="Please input" />
        </div>
      </div>
      <div class="user-name">
        <div class="form-left">
          <div class="icon">Verification Code:</div>
        </div>
        <div class="form-right text">
          <input
            placeholder="Code"
            v-model="verificationCode"
            style="margin-right: 60px; width: 150px"
          />
          <span class="send" @click="setCodeEvent">OTP</span>
        </div>
      </div>
    </div>
    <div class="button" @click="submitpass">Confirm modification</div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { countDwon } from "@/utils/common";
export default {
  data() {
    return {
      password: "",
      repeatPassword: "",
      phone: "",
      verificationCode: "",
      verificationKey: "",
    };
  },
  computed: {
    checkPhone() {
      return this.phone;
    },
  },
  methods: {
    setCodeEvent(e) {
      if (this.checkPhone) {
        this.$store
          .dispatch("verificationCodes", {
            phone: this.phone,
            area: 91,
            type: "other",
          })
          .then((result) => {
            countDwon(e.target, 60);
            this.verificationKey = result.key;
          })
          .catch((err) => {});
      } else {
        this.$toast("Please enter phone number");
      }
    },
    veildcoe1() {
      if (!this.phone) {
        Toast("Phone cannot be empty！");
        return false;
      }
      if (!this.verificationCode) {
        Toast("Verification code cannot be empty！");
        return false;
      }
      if (!this.password) {
        Toast("Please enter the change password！");
        return false;
      }
      if (!this.repeatPassword) {
        Toast("Please enter the change repeat password");
        return false;
      }
      if (this.password != this.repeatPassword) {
        Toast("Duplicate password error");
        return false;
      }
      return true;
    },
    submitpass() {
      const bool = this.veildcoe1();
      if (bool) {
        this.$store
          .dispatch("password", {
            password: this.password,
            password_confirmation: this.repeatPassword,
            verification_code: this.verificationCode,
            verification_key: this.verificationKey,
          })
          .then((result) => {  
            if (result.code == 0) {
              this.$router.back();
            } else {
              this.$toast(result.msg);
            }
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.change-word {
  height: 100%;
  min-height: 100vh;
  background-color: #fff;
}
.bg-line {
  height: 15px;
  background-color: #f6f6f6;
}
.form {
  width: 100%;
  margin: auto;
  margin-top: 15px;
  background-color: #fff;
  .user-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    font-size: 15px;
    color: #081647;

    .invite {
      font-size: 15px;
      color: #081647;
    }
    .text input {
      font-size: 15px;
      border: none;
      text-align: right;
    }
    .text .tel {
      margin-right: 10px;
      font-size: 15px;
      font-weight: 400;
    }
    .text .send {
      position: absolute;
      right: 20px;
      font-size: 12px;
      color: #4c6cf1;
      padding: 2px 8px;
      background: #e3e7fe;
      border: 1px solid #4c6cf1;
      opacity: 1;
      border-radius: 11px;
    }
  }
  .icon {
    img {
      width: 17px;
      height: 17px;
      margin-right: 10px;
    }
  }
  .form-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    font-size: 15px;
    color: #081647;
    border-bottom: 1px solid #ebebeb;
    .icon img {
      width: 17px;
      height: 17px;
    }
    input {
      width: 155px;
      border: none;
      text-align: right;
    }
  }
}
.button {
  margin: 25px auto;
  text-align: center;
  width: 300px;
  height: 50px;
  background: #4a67f5;
  line-height: 50px;
  border-radius: 23px;
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>